<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-17 10:29:31
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-23 20:47:53
 * @FilePath: \后端管理系统\app\src\views\Users\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-08-17 10:29:31
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-08-18 21:45:15
 * @FilePath: \后端管理系统\app\src\views\Users\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <MyBreadcrumb :breadList="$route.meta.breadList" />
    <!-- <UserSearch
      :userObj="userObj"
      v-on:init-search="initSearch"
      v-on:add-user="addUser"
    /> -->

    <UserSearch :userObj="userObj" v-on:init-search="initSearch" class="search">
       <el-button type="primary" @click="addUser">{{ title }}</el-button>
    </UserSearch>

    <UserTable
      class="table"
      :tableData="tableData"
      :total="total"
      :userObj="userObj"
      v-on:page-change="pageChange"
      v-on:edit-dialog="editDialog"
      v-on:del-dialog="delDialog"
      v-on:close-dialog="closeDialog"
    />

    <UserDialog
      :type="type"
      :dialogFormVisible="dialogFormVisible"
      v-on:save-form="saveForm"
      :ruleForm="form"
      v-on:close-dialog="closeDialog"
    />

    <UserDelete
      :dialogVisible="dialogVisible"
      v-on:close-dialog="closeDialog"
      v-on:submit="submit"
    />
  </div>
</template>

<script>
// 公共组件面包屑
import MyBreadcrumb from "../../components/MyBreadcrumb.vue";
// 表格
import UserTable from "./component/UserTable.vue";
//搜索
import UserSearch from '../../components/Search.vue'
// 表格
import UserDialog from "./component/UserDialog.vue";

// 删除
import UserDelete from "./component/UserDelete.vue";

import {
  httpUsers,
  httpAddUsers,
  httpEditUsers,
  httpDeleteUsers,
} from "../../api/users";
export default {
  components: {
    MyBreadcrumb,
    UserSearch,
    UserTable,
    UserDialog,
    UserDelete,
  },

  data() {
    return {
      title: '添加用户',
      tableData: [],
      userObj: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      total: 0,
      dialogFormVisible: false, //弹框
      type: false, //添加还是编辑  true编辑
      form: {
        //添加信息
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      dialogVisible: false, //删除弹框开关
      delId: "", //删除的id
    };
  },
  created() {
    this.initTable();
  },
  methods: {
    // 初始化表格数据
    async initTable() {
      const res = await httpUsers("/users", this.userObj);
      this.tableData = res.data.data.users;
      this.total = res.data.data.total;
    },
    // 搜索
    initSearch() {
      this.initTable();
    },
    // 分页切换
    pageChange(obj) {
      if (obj.type === "size") {
        this.userObj.pagesize = obj.val;
      } else {
        this.userObj.pagenum = obj.val;
      }
      this.initTable();
    },
    addUser() {
      this.dialogFormVisible = true;
      this.type = false;
    },
    // 关闭弹框
    async closeDialog() {
      this.dialogVisible = false;
      this.dialogFormVisible = false;
    },
    // 编辑
    editDialog(obj) {
      this.form = { ...this.form, ...obj };
      this.dialogFormVisible = true;
      this.type = true;
    },
    // 确定按钮
    async saveForm() {
      let res = {};
      if (!this.type) {
        //type = false

        // 添加
        res = await httpAddUsers("/users", this.form);

        if (res.data.meta.status === 201) {
          this.$message({
            message: res.data.meta.msg,
            type: "success",
          });
        } else {
          this.$message.error(res.data.meta.msg);
        }
      } else {
        // 编辑
        // console.log(11)

        res = await httpEditUsers(`users/${this.form.id}`, this.form);
      }
      this.dialogFormVisible = false;
      this.initTable();
    },

    // 删除
    delDialog(id) {
      this.dialogVisible = true;
      this.delId = id;
    },
    // 删除提交按钮
    async submit() {
      this.dialogVisible = false;
      const res = await httpDeleteUsers(`users/${this.delId}`);
      this.initTable();
    },
  },
};
</script>

<style>
.search, .table{
  margin-top: 20px;
}

</style>